react-webpack-cookbook 


Published 
hainuo with GitBook AG 


react-webpack-cookbook 


N 


w 


i， 第 一 步 

i 开始 工作 流 

证 浏览 器 自动 刷新 
iv. 引入 文件 


. React JS 


i. Hci React JS 
ii. 优化 重合 并 


iii. Flow 


. CSS, Fonts and Images 


i， 加 载 CSS 

i. 自动 刷新 CSS 

ii, 加 载 LESS 和 SASS 
iv. 内 联 images 

v. 内 联 fonts 


. 部署 策 略 


， 发布 配置 

让 合并 成 单 文件 

证 分离 应 用 和 第 三 方 
iv. BAO 

v. 懒 加 载 入 口 文 件 
i aR 


i， 优 化 开发 

ii ， 热 加 载 组 件 

ii, 使 用 下 一 代 JavaScript 
iv, 优化 缓存 

v. 匹配 器 

vi， 懒 加 载 入 口 

vii, 创建 一 个 复 用 代码 
viii. 8# Chunks 

ix. 创建 库 


react-webpack-cookbook 


React 和 Webpack 小 书 - 一 本 介绍 在 React JS 中 使 用 
Webpack 的 小 书 。 


中 文 版 


贡献 


若 书 中 有 遗漏 或 者 错误 的 地 方 ， 可 以 按照 下 面 的 方式 : 


1. Fork 这 个 仓库 

2. 切换 到 zh-cn 分 支 

3. 在 /content 里 做 修改 
4. 提交 一 个 PR 


或 者 可 以 到 原 仓 库 中 提 issue, 


注意 gh-pages 内 容 是 自动 生成 的 。 


Gitbook 生成 器 


生成 器 会 自动 生成 wiki 和 网 站 ， 为 了 能 够 让 它 提交 gh-pages 分 支 ， 这 样 使 用 它 : 


1. npm install 


2. npm run generate-gitbook 
它 会 自动 生成 /gh-pages ， 你 可 以 直接 通过 文件 系统 来 访问 。 


如 果 要 发 布 内 容 ， 那 么 输入 npm run deploy-gitbook ， 它 会 自动 更 新 gh-pages 分 支 。 
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In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to 
style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript 
with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and 
such). 


在 Web 开发 历程 上 ， 我 们 构建 了 很 多 小 型 的 技术 解决 方案 ， 比 如 用 HTML 去 描述 页 面 结构 ，CSS 去 描述 页 面 祥 式 ， 
JavaScript 去 描述 页 面 逻 辑 ， 或 者 你 也 可 以 用 一 些 比如 Jade 去 取代 HTML, FA Sass 或 Less 去 取代 CSS， 用 CoffeeScript 
或 者 TypeScript 之 类 的 去 取代 JavaScript， 不 过 项 目 中 的 依赖 可 能 是 一 件 比 较 烦恼 的 事情 。 (需要 安装 额外 很 多 的 库 ) 


There are good reasons why we use these various technologies. Regardless of what we use, however, we still want to end 
up with something that can be run on the browsers of the clients. This is where build systems come in. Historically speaking 
there have been many. Make is perhaps the most known one and still a viable option in many cases. In the world of 
frontend development particularly Grunt and Gulp have gained popularity. Both are made powerful by plugins. NPM, the 
Node.js package manager, is full of those. 


这 里 有 很 多 为 什么 我 们 需要 尝试 那些 新 技术 的 理由 。 不 管 我 们 用 什么 ， 总 之 ， 我 们 还 是 希望 使 用 那些 能 够 处 理 在 浏览 器 端的 
方案 ， 所 以 出 来 了 编译 方案 。 历 史上 已 经 有 很 多 分 享 了 ， 上 比如 Make 可 能 是 很 多 解决 方案 中 最 知名 且 是 可 行 的 方案 。Grunt 
和 Gulp 是 在 是 前 端的 世界 中 最 流行 的 解决 方案 ， 他 们 两 个 都 有 很 多 非常 有 用 的 插件 。NPM (Node.js 的 包 管 理 器 ) WAST 
他 们 两 个 。 


Grunt 


Grunt is the older project. It relies on plugin specific configuration. This is fine up to a point but believe me, you don't want 
to end up having to maintain a 300 line Gruntfile . The approach simply turns against itself at some point. Just in case you 
are curious what the configuration looks like, here's an example from Grunt documentation: 





Grunt 是 相 比 后 面 几 个 更 早 的 项 目 ， 他 依赖 于 各 种 插件 的 配置 。 这 是 一 个 很 好 的 解决 方案 ， 但 是 请 相信 我 ， 你 不 会 想 看 到 一 
个 300 行 的 6runtfile 。 如 果 你 好 奇 Grunt 的 配置 会 如 何 ， 那 么 这 里 是 有 个 从 Grunt 文档 的 例子 : 


module.exports = function(grunt) { 


grunt. initConfig({ 
shinee 
Files: GkUnttile: Jsi; ShC/= 4/4 jst "testy t/s]; 
options: { 
globals: { 
jQuery: true 
J 
} 
}, 
watch: { 
files: ['<%= jshint.files %>'], 
tasks: ['jshint'] 
} 
}); 


grunt.loadNpmTasks('grunt-contrib-jshint'); 
grunt. loadNpmTasks('grunt-contrib-watch' ); 


grunt.registerTask('default', ['jshint']); 


Gulp 


Gulp takes a different approach. Instead of relying on configuration per plugin you deal with actual code. Gulp builds on top 
of the tried and true concept of piping. If you are familiar with Unix, it's the same here. You simply have sources, filters and 
sinks. In this case sources happen to match to some files, filters perform some operations on those (ie. convert to 
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JavaScript) and then output to sinks (your build directory etc.). Here's a sample Gulpfile to give you a better idea of the 
approach taken from the project README and abbreviated a bit: 


Gulp 提供 了 一 个 不 一 样 的 解决 方案 ， 而 不 是 依赖 于 各 种 插件 的 配置 。Gulp 使 用 了 一 个 文件 流 的 概念 。 如 果 你 熟悉 Unix, AB 
么 Gulp 对 你 来 说 会 差不多 ，Gulp 会 提供 你 一 些 简单 化 的 操作 。 在 这 个 解决 方案 中 ， 是 去 匹配 一 些 文件 然后 操作 (就 是 说 和 
JavaScript 相反 ) 然后 输出 结果 〈 比 如 输出 在 你 设置 的 编译 路 径 等 ) 。 这 里 有 一 个 简单 的 eulpfile 的 例子 : 


var gulp = require('gulp'); 

var coffee = require('gulp-coffee'); 

var concat = require('gulp-concat'); 

var uglify = require('gulp-uglify'); 

var sourcemaps = require('gulp-sourcemaps' ); 
var del = require('del'); 


var paths = { 
scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'], 


3; 




















// 不 是 所 有 的 任务 需要 使 用 streams 
// 一 个 gulpfile 只 是 另 一 个 node 的 程序 ， 所 以 你 可 以 使 用 所 有 npm 的 包 
gulp.task('clean', function(cb) { 
// 你 可 以 gulp.src” 来 使 用 多 重 通配符 模式 
del(['build'], cb); 
3); 



























































gulp.task('scripts', ['clean'], function() { 
// 压缩 和 复制 所 有 JavaScript (除了 第 三 方 库 ) 
// 加 上 sourcemaps 
return gulp.src(paths.scripts) 
.pipe(sourcemaps.init()) 
. pipe(coffee()) 
-pipe(uglify()) 
.pipe(concat('all.min.js')) 
. pipe(sourcemaps.write()) 
-pipe(gulp.dest('build/js')); 
J); 


// 监听 文件 修改 
gulp.task('watch', function() { 
gulp.watch(paths.scripts, ['scripts']); 


3); 


// 默认 任务 (就 是 你 在 命 合 行 输入 “gulp ”时 运行 ) 
gulp.task('default', ['watch', 'scripts']); 


Given the configuration is code you can always just hack it if you run into troubles. You can wrap existing Node.js modules 
as Gulp plugins and so on. You still end up writing a lot of boilerplate for casual tasks, though. 


这 些 配 置 都 是 代码 ， 所 以 当 你 遇 到 问题 也 可 以 修改 ， 你 也 可 以 使 用 已 经 存在 的 Gulp 插件 ， 但 是 你 还 是 需要 写 一 堆 模 板 任 
务 。 


Browserify 


Dealing with JavaScript modules has always been a bit of a problem given the language actually doesn't have a concept of 
module till ES6. Ergo we are stuck with the 90s when it comes to browser environment. Various solutions, including AMD, 
have been proposed. In practice it can be useful just to use CommonJS, the Node.js format, and let tooling deal with the 
rest. The advantage is that you can often hook into NPM and avoid reinventing the wheel. 


处 理 JavaScript 模块 一 直 是 一 个 大 问题 ， 因 为 这 个 语言 在 ES6 之 前 没有 这 方面 的 概念 。 因 此 我 们 还 是 停留 在 90 年 代 ， 各 种 
解决 方案 ， 比 如 提出 了 AMD。 在 实践 中 只 使 用 CommonJS (Node.js 所 采用 的 格式 ) 会 比较 有 帮助 ， 而 让 工具 去 处 理 剩 下 
的 事情 。 它 的 优势 是 你 可 以 发 布 到 NPM 上 来 避免 重新 发 明 轮 子 。 


Browserify solves this problem. It provides a way to bundle CommonJS modules together. You can hook it up with Gulp. In 
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addition there are tons of smaller transformation tools that allow you to move beyond the basic usage (ie. watchify provides 
a file watcher that creates bundles for you during development automatically). This will save some effort and no doubt is a 
good solution up to a point. 


Browserify 解决 了 这 个 问题 ， 它 提供 了 一 种 可 以 把 模块 集合 到 一 起 的 方式 。 你 可 以 用 Gulp 调用 它 ， 此 外 有 很 多 转换 小 工具 
可 以 让 你 更 兼容 的 使 用 (比如 watchify 提供 了 一 个 文件 监视 器 帮助 你 在 开发 过 程 中 更 加 自动 化 地 把 文件 合并 起 来 ) ， 这 样 会 
省 下 很 多 精力 。 母 庸 置 疑 ， 一 定 程度 来 讲 ， 这 是 一 个 很 好 的 解决 方案 。 


Webpack 


Webpack expands on the idea of hooking into CommonJS require . What if you could just require whatever you needed 
in your code, be it CoffeeScript, Sass, Markdown or something? Well, Webpack does just this. It takes your dependencies, 
puts them through loaders and outputs browser compatible static assets. All of this is based on configuration. Here is a 
sample configuration from the official Webpack tutorial: 


Webpack 扩展 了 CommonJs 的 require 的 想法 ， 比 如 你 想 在 CoffeeScript. Sass, Markdown 或 者 其 他 什么 代码 中 
require 你 想 要 的 任何 代码 的 话 ? 那 么 Webpack 正 是 做 这 方面 的 工作 。 它 会 通过 配置 来 取出 代码 中 的 依赖 ， 然 后 把 他 们 通 
过 加 载 器 把 代码 兼容 地 输出 到 静态 资源 中 。 这 里 是 一 个 Webpack 官网 上 的 例子 : 


module.exports = { 
entry: "./entry.js", 
output: { 
path: _ dirname, 
filename: "bundle.js" 
}, 
module: { 
loaders: [ 
{ test: /\.css$/, loader: "style!css" } 


] 


In the following sections we'll build on top of this idea and show how powerful it is. You can, and probably should, use 
Webpack with some other tools. It won't solve everything. It does solve the difficult problem of bundling, however, and that's 
one worry less during development. 


在 接 下 来 的 章节 中 我 们 会 使 用 Webpack 来 构建 项 目 来 展示 它 的 能 力 。 你 可 以 用 其 他 工具 和 Webpack 一 起 使 用 。 它 不 会 解决 
所 有 事情 ， 只 是 解决 一 个 打包 的 难题 ， 无 论 如 何 ， 这 是 在 开发 过 程 中 需要 解决 的 问题 。 
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Before getting started you should make sure you have a recent version of Node.js and NPM installed. See 
nodejs.org for installation details. We'll use NPM to set up various tools. 





qd 


在 开始 之 前 ， 你 需要 把 你 的 Node.js 和 NPM 都 更 新 到 最 新 的 版 本 。 访 问 nodejs.org 查看 安装 详情 。 我 们 将 会 使 
NPM 安装 一 些 工具 。 





Getting started with Webpack is straightforward. I'll show you how to set up a simple project based on it. As a first step, set 
a directory for your project and hit npm init and fill in some answers. That will create a package.json for you. Don't worry if 


some fields don't look ok, you can modify those later. 
开始 使 用 Webpack 非常 简单 ， 我 会 展示 给 你 看 使 用 它 的 一 个 简单 的 项 目 。 第 一 步 ， 为 你 的 项 目 新 建 一 个 文件 夹 ， 然 后 输入 
npm init ， 然 后 填写 相关 问题 。 这 样 会 为 你 创建 了 package.json ， 不 用 担心 填 错 ， 你 可 以 之 后 修改 它 。 


安装 Webpack 


Next you should get Webpack installed. We'll do a local install and save it as a project dependency. This way you can 
invoke the build anywhere (build server, whatnot). Run npm i webpack --save-dev . If you want to run the tool, hit 


node_modules/.bin/webpack . 


接 下 来 我 们 安装 Webpack， 我 们 要 把 它 安 装 在 本 地 ， 然 后 把 它 作为 项 目 依 赖 保存 下 来 。 这 样 你 可 以 在 任何 地 方 编译 CARA 
编译 之 类 的 ) 。 输 入 npm i webpack --save-dev 。 如 果 你 想 运行 它 ， 就 输入 node_modules/.bin/webpack o 


目录 结构 


Structure your project like this: 
项 目的 目录 结构 长 这 样 : 


e /app 
o main.js 
o component.js 
e /build 
o bundle.js (自动 创建 ) 
o index.html 
e package.json 
e webpack.config.js 


In this case we'll create bundle.js using Webpack based on our /app . To make this possible, let's set up 


webpack.config.js . 


我 们 会 使 用 Webpack 在 我 们 的 /app 里 来 自动 创建 bundle.js 。 接 下 来 ， 我 们 来 设置 webpack.config.js o 
设置 Webpack 

Webpack 的 配置 文件 长 这 样 : 

webpack.config.js 


var path = require('path'); 


module.exports = { 
entry: path.resolve(__dirname, ‘app/main.js'), 
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output: { 
path: path.resolve(__dirname, '‘build'), 
filename: 'bundle.js', 
}, 
J; 


运行 你 的 第 一 个 编译 


Now that we have basic configuration in place, we'll need something to build. Let's start with a classic Hello world type of 
app. Set up /app like this: 


现在 我 们 有 了 一 个 最 简单 的 配置 ， 我 们 需要 有 什么 东西 去 编译 ， 让 我 们 开始 一 个 经 典 的 Hello world, i218 /app (RIX : 


app/component.js 


‘use strict: 


module.exports = function () { 
var element = document.createElement('h1'); 


element.innerHTML = ‘Hello world'; 


return element; 


i; 
app/main.js 


use strict, 
var component = require('./component.js'); 


document . body .appendChild(component()); 


Now run webpack in your terminal and your application will be built. A bundle.js file will appear in your /build folder. Your 
index.html file in the build/ folder will need to load up the application. 


现在 在 你 的 命令 行 运行 webpack ， 然 后 你 的 应 用 会 开始 编译 ， 一 个 bundle.js 文件 就 这 样 出 现在 你 的 /build 文件 夹 下 ， 需 
要 在 build/ 下 的 index.html 去 启动 项 目 。 


build/index.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
</head> 
<body> 
<script src="bundle.js"></script> 
</body> 
</html> 


It would be possible to generate this file with Webpack using html-webpack-plugin. You can give it a go if you are 
feeling adventurous. It is mostly a matter of configuration. Generally this is the way you work with Webpack. 








这 个 文件 可 以 用 html-webpack-plugin 来 生成 。 如 果 你 觉得 冒险 ， 那 就 把 剩 下 的 工具 交 给 它 来 做 。 使 用 它 就 只 有 一 个 配 
置 的 问题 。 一 般 来 说 使 用 Webpack 来 工作 就 是 这 么 个 套路 。 
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>= 4 
运行 应 用 
Just double-click the index.htm! file or set up a web server pointing to the build/ folder. 


只 要 双击 index.html 或 者 设置 一 个 Web 服务 指向 builds 文件 夹 。 


设 package.json scripts 


It can be useful to run build, serve and such commands through npm . That way you don't have to worry about the 
technology used in the project. You just invoke the commands. This can be achieved easily by setting up a scripts section 
tO package.json. 


npm 是 一 个 非常 好 用 的 用 来 编译 的 指令 ， 通 过 npm 你 可 以 不 用 去 担心 项 目 中 使 用 了 什么 技术 ， 你 只 要 调用 这 个 指令 就 可 以 
了 ， 只 要 你 在 package.json 中 设置 scripts 的 值 就 可 以 了 。 


In this case we can move the build step behind npm run build like this: 
在 这 个 案例 中 我 们 把 编译 步骤 放 到 npm run build 中 是 这 样 : 


1. npm i webpack --save - If you want to install Webpack just a development dependency, you can use --save-dev . This 
is handy if you are developing a library and don't want it to depend on the tool (bad idea!). 
2. Add the following to package.json : 





1. npm i webpack --save - 如 果 你 想 要 把 Webpack 作为 一 个 项 目的 开发 依赖 ， 就 可 以 使 用 --save-dev ， 这 样 就 非常 方便 地 
让 你 在 开发 一 个 库 的 时 候 ， 不 会 依赖 工具 (但 不 是 个 好 方法 ! ) 。 
2. 把 下 面 的 内 容 添加 到 package.json 中 。 


Se at 
"build": "webpack" 
} 


To invoke a build, you can hit npm run build now. 
现在 你 可 以 输入 npm run build 就 可 以 编译 了 。 


Later on this approach will become more powerful as project complexity grows. You can hide the complexity within scripts 
while keeping the interface simple. 


当 项 目 越发 复 条 的 时 候 ， 这 样 的 方法 会 变 得 越 来 越 有 效 。 你 可 以 把 所 有 复 末 的 操作 隐藏 在 scripts 里 面 来 保证 界面 的 简洁 。 


The potential problem with this approach is that it can tie you to a Unix environment in case you use environment specific 
commands. If so, you may want to consider using something environment agnostic, such as gulp-webpack. 


不 过 潜在 的 问题 是 这 种 方法 会 导致 如 果 你 使 用 一 些 特殊 的 指 倒 的 时 候 只 能 在 Unix 环境 中 使 用 。 所 以 如 果 你 需要 考虑 一 些 未 知 
的 环境 中 的 话 ， 那 么 gulp-webpack 会 是 一 个 好 的 解决 方案 。 


Note that NPM will find Webpack. npm run adds itto the PATH temporarily so our simple incantation will work. 


注意 NPM 会 找到 Webpack， npm run 会 把 他 临时 加 到 PATH 来 让 我 们 这 个 神奇 的 命令 工作 。 
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Hitting npm run build all the time will get boring eventually. Fortunately we can work around that quite easily. Let's set up 


webpack-dev-server . 


如 果 需 要 一 直 输 入 npm run build 确实 是 一 件 非常 无 聊 的 事情 ， 幸 运 的 是 ， 我 们 可 以 把 让 他 安静 的 运行 ， 让 我 们 设置 


webpack-dev-server o 


设置 webpack-dev-server 


As a first step, hit npm i webpack-dev-server --save . In addition we'll need to tweak package.json scripts section to include 
it. Here's the basic idea: 


第 一 步 ， 输 入 npm i webpack-dev-server --save ， 此 外 ， 我 们 需要 去 调整 package.json scripts 部 分 去 包含 这 个 指令， 下 面 是 
基本 的 设置 : 


package.json 


{ 
USCiel pester 
"build": "webpack", 
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" 
} 
Y 


When you run npm run dev from your terminal it will execute the command stated as a value on the dev property. This is 
what it does: 


当 你 在 命令 行 里 运行 npm run dev 的 时 候 他 会 执行 dev 属性 里 的 值 。 这 是 这 些 指 今 的 意思 : 


1. webpack-dev-server - Starts a web service on localhost:8080 
--devtool eval - Creates source urls for your code. Making you able to pinpoint by filename and line number where 
any errors are thrown 

3. --progress - Will show progress of bundling your application 

4. --colors - Yay, colors in the terminal! 

5. --content-base build - Points to the output directory configured 


webpack-dev-server - 在 localhost:8080 建立 一 个 Web 服务 器 

--devtool eval -为 你 的 代码 创建 源 地 址 。 当 有 任何 报错 的 时 候 可 以 让 你 更 加 精确 地 定位 到 文件 和 行 号 
--progress - 显示 合并 代码 进度 

--colors - Yay， 命 令 行 中 显示 颜色 ! 

--content-base build - 指向 设置 的 输出 目录 


ak WN bP 


To recap, when you run npm run dev this will fire up the webservice, watch for file changes and automatically rebundle your 
application when any file changes occur. How neat is that! 


总 的 来 说 ， 当 你 运行 npm run dev 的 时 候 ， 会 启动 一 个 Web 服务 器 ， 然 后 监听 文件 修改 ， 然 后 自动 重新 合并 你 的 代码 。 真 
的 非常 简洁 ! 


Go to http://localhost:8080 and you should see something. 


访问 http:/Mlocalhost:8080 你 会 看 到 效果 。 
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When webpack-dev-server is running it will watch your files for changes. When that happens it rebundles your project and 
notifies browsers listening to refresh. To trigger this behavior you need to change your index.htm! file in the build’ folder. 


43447 webpack-dev-server 的 时 候 ， 它 会 监听 你 的 文件 修改 。 当 项 目 重 新 合并 之 后 ， 会 通知 浏览 器 刷新 。 为 了 能 够 触发 这 
样 的 行为 ， 你 需要 把 你 的 index.htm 放 到 build/ 文件 夹 下 ， 然 后 做 这 样 的 修改 : 


build/index.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
</head> 
<body> 
<script src="http://localhost :8080/webpack-dev-server .js"></script> 
<script src="bundle.js"></script> 
</body> 
</html> 


We added a script that refreshes the application when a change occurs. You will also need to add an entry point to your 
configuration: 


我 们 需要 增加 一 个 脚本 当 发 生 改 动 的 时 候 去 自动 刷新 应 用 ， 你 需要 在 配置 中 增加 一 个 人口 点 。 


var path = require('path'); 


module.exports = { 
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')], 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js', 
}, 
J; 


Thats it! Now your application will automatically refresh on file changes. 


就 是 这 样 ! 现在 你 的 应 用 就 可 以 在 文件 修改 之 后 自动 刷新 了 。 
Say Ar 
默认 环境 


In the example above we created our own index.htm! file to give more freedom and control. It is also possible to run the 
application from http://localhost:8080/webpack-dev-server/bundle. This will fire up a default index.htm! file that you do 
not control. It also fires this file up in an iFrame allowing for a status bar to indicate the status of the rebundling process. 


在 上 面 的 例子 中 我 们 创建 了 index.htm’ 文件 来 获取 更 多 的 自由 和 控制 。 同 样 也 可 以 从 http://localhost:8080/webpack-dev- 
serverlbundle 运行 应 用 。 这 会 触发 一 个 默认 的 你 不 能 控制 的 index.htm/ ， 它 同样 会 触发 一 个 允许 iFrame 中 显示 重合 并 的 过 


程 。 
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模块 


Webpack allows you to use different module patterns, but "under the hood" they all work the same way. All of them also 
works straight out of the box. 


Webpack 人 允许 你 使 用 不 同 的 模块 类 型 ， 但 是 “底层 "必须 使 用 同一 种 实现 。 所 有 的 模块 都 能 够 开 箱 即 用 。 


ES6 模块 


import MyModule from './MyModule.js'; 


CommonJS 


var MyModule = require('./MyModule.js'); 


AMD 


define(['./MyModule.js'], function (MyModule) { 


3); 


理解 文件 路 径 


A module is loaded by filepath. Imagine the following tree structure: 
一 个 模块 会 按 它 的 文件 路 径 来 加 载 ， 看 一 下 下 面 的 这 个 结构 : 


e /app 
o /modules 


a MyModule.js 
o main.js (entry point) 
o utils.js 
Lets open up the main.js file and require app/modules/MyModule.js in the two most common module patterns: 


打开 main.js 然后 可 以 通过 下 面 两 种 方式 引入 app/modules/MyModule.js 


app/main.js 


LL AESGS 
import MyModule from './modules/MyModule.js'; 


// CommonJS 
var MyModule = require('./modules/MyModule.js'); 


The ./ atthe beginning states "relative to the file | am in now". 


最 开始 的 ./ 是 “相对 当前 文件 路 径 ” 
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Now let us open the MyModule.js file and require appl/utils. 
让 我 们 打开 MyModule.js 然后 引入 applutils : 


app/modules/MyModule.js 


// ES6 相对 路 径 
importe utils from A- -UFES JSE, 


// ES6 绝对 路 径 
import utils from '/utils.js'; 


// CommonJS 相对 路 径 
var utils = require('./../utils.js'); 


// CommonJS 绝对 路 径 
var utils = require('/utils.js'); 





The relative path is relative to the current file. The absolute path is relative to the entry file, which in this case is main.js. 


相对 路 径 是 相对 当前 目录 。 绝 对 路 径 是 相对 入 口 文件 ， 这 个 案例 中 是 main jso 


我 需要 使 用 文件 后 


No, you do not have to use .js, but it highlights better what you are requiring. You might have some .js files, and some .jsx 
files and even images and css can be required by Webpack. It also clearly differs from required node_modules and specific 
files. 


不 ， 你 不 需要 去 特意 去 使 用 js， 但 是 如 果 你 引入 之 后 高 亮 会 更 好 。 你 可 能 有 一 些 .js 文件 和 一 些 .jsx 文件 ， 甚 至 一 些 图 片 和 
css 可 以 用 Webpack 引入 ， 其 至 可 以 直接 引入 node_modules 里 的 代码 和 特殊 文件 。 


Remember that Webpack is a module bundler! This means you can set it up to load any format you want given there is a 
loader for it. We'll delve into this topic later on. 


记 住 ，Webpack 只 是 一 个 模块 合并 ! 也 就 是 说 你 可 以 设置 他 去 加 载 任何 你 写 的 匹配 ， 只 要 有 一 个 加 载 器 。 我 们 稍 后 会 继续 深 
人 这 id 话题 。 
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| remember when | saw React the first time around the time it was announced | was skeptical. Particularly mixing some sort 
of HTML within your code seemed against good conventions. It just felt like a "bad idea"®. 


我 记得 当 我 第 一 次 看 到 React 的 时 候 是 十 分 怀疑 的 ， 特 别 是 把 HTML 揉 进 代码 里 违背 了 传统 的 那些 约定 ， 看 起 来 像 是 一 个 
“ 坏 注意 "。 


But that's what React and similar approaches are doing. They challenge some of the conventions and replace them with 
something more palatable. Sometimes a bigger change in thinking is needed for you to move forward as a developer. 
That's what React did for me. It takes some powerful ideas from the world of functional programming and then builds on top 
of those. 


但 是 这 就 是 React， 他 们 挑战 了 一 些 约定 ， 然 后 用 这 种 方式 代替 了 。 作 为 一 个 开发 者 ， 有 时 候 为 了 能 够 改变 思考 方式 是 你 向 
前 走 的 一 个 必 经 之 路 。 这 就 是 React 对 我 的 影响 ， 它 建立 在 画 数 式 编 程 上 带 给 了 我 很 多 有 意思 的 想法 。 


基础 功能 


Before you can understand React and how it changes web development, there are a few things you should know about it. 
React itself won't be enough. It solves only the problem of views. You still need to complement it with something else. But 
that's a good thing. 


在 你 能 理解 React 是 如 何 改变 Web 开发 之 前 ， 这 里 有 一 点 未 西 你 需要 知道 的 。React 它 本 身 是 不 够 丰富 的 ， 它 只 能 解决 一 
些 视图 上 的 问题 ， 你 仍然 需要 一 些 东 西 去 帮助 它 完 成 事情 。 


The greatest and worst feature of frameworks is that they sort of cage you in. As long as you are doing what they expect 
you to do within their boundaries, everything is fine. It is only after you start to reach beyond those boundaries that 
problems begin to appear. In a library driven approach you aren't as bound. Initially you might not be as fast or efficient but 
over time as problems become harder, you will have more choices available. 
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是 ， 当 你 需要 跨 出 边界 的 时 候 ， 开 始 有 问题 了 ， 在 一 个 库 驱 动 方法 里 你 是 不 被 限制 的 ， 最 初 你 可 能 是 高 效 地 完成 需求 ， 但 是 
伴随 时 间 的 推进 ， 问 题 开始 变 得 严峻 起 来 ， 你 需要 更 多 可 行 的 选择 。 


JSX 的 基础 


React provides a component centric approach to frontend development. You will design your application as smaller 
components, each of which has it own purpose. Taken to the extreme a component may contain its logic, layout and basic 
styling. To give you an example of JSX: 


React 为 前 端 开 发 提供 了 一 个 组 件 为 中 心 的 方法 ， 你 可 以 为 你 的 应 用 设计 一 个 更 小 的 组 件 ， 所 有 组 件 有 各 自 的 目的 ， 甚 至 极 
端 来 说 ， 一 个 组 件 可 能 包含 它 自身 的 逻辑 ， 结 构 和 基本 的 样式 。 这 里 有 个 ISX 的 例子 : 


<TodoItem className='urgent' owner={owner} task='Make a dinner' /> 


You can see a couple of basic features of JSX here. Instead of using class , we'll use the JavaScript equivalent. In addition 
we have defined a couple of custom properties in form of owner and task. owner is something that is injected from a 
variable named owner that's within the same scope as our JSX. For task we provide a fixed value. 


你 可 以 看 到 一 个 基本 功能 的 JSX， 我 们 用 classname 替代 了 使 用 class 。 此 外 ， 我 们 定义 了 一 些 自 定义 属性 owner 和 
task, owner 的 值 是 从 ISX 同 环境 中 一 个 变量 叫 owner $A, MRNA task 提供 了 一 个 固定 的 值 。 


In practice you would most likely structure this a little differently to fit your data model better. That goes a little beyond basic 
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React, though. 
在 实践 中 ， 你 可 以 根据 你 的 数据 模型 结构 来 稍微 调整 目录 结构 会 更 好 ， 虽 然 是 React 进 阶 的 知识 点 了 。 


We can mix normal JavaScript code within those {}'s. We can use this idea to render a list of Todottem s like this (ES 
syntax): 


我 们 可 以 用 那些 {} 来 混合 普通 JavaScript 代码 ， 我 们 可 以 用 这 个 点 像 这 样 去 去 泻 染 一 个 Todortem 列表 (ES 语法 ) 


<ul>{todoItems.map((todoItem, i) => 
<li key={'todoitem' + i}><TodoItem owner={todoItem.owner} task={todoItem.task} /></li> 
)}</ul> 


You probably noticed something special here. What is that key property about? It is something that tells React the exact 
ordering of your items. If you don't provide unique keys for list items like this, React will warn you as it won't be able to 
guarantee the correct ordering otherwise. 


你 可 能 注意 到 这 里 有 些 特殊 的 地 方 ， 什 么 是 key 属性 ? 这 是 告诉 React 这 个 项 的 准确 顺序 。 如 果 你 不 需要 像 这 样 需要 提供 
列表 项 的 唯一 Key 的 话 ， 否 则 React 会 警告 你 这 样 它 没 办 法 保证 是 正确 的 顺序 。 


This has to do with the fact that React actually implements something known as Virtual DOM (VDOM for short) on top of 
actual DOM. It is a subset of DOM that allows React to optimize its rendering. The primary advantage of this approach is 
that it allows React to eschew a lot of legacy our good old DOM has gained through years. This is the secret to React's high 
performance. 


需要 了 解 的 事实 是 React 实际 上 在 真实 DOM 上 实现 了 虚拟 DOM (简称 VDOM) ， 这 是 一 个 DOM 的 子 集 ， 能 够 让 React 
能 够 优化 它 的 泻 染 。 这 个 优化 的 方法 是 它 让 React 能 够 避 开 困 恼 我 们 多 年 的 DOM 性 能 损耗 。 这 就 是 React 高 性 能 的 原因 。 


整体 组 件 


To give you a better idea of what components look like, let's expand our TodoItem example into code (ES6 + JSX). I've 
done this below and will walk you through it: 


为 了 能 够 让 你 更 加 清楚 组 件 长 什么 样子 ， 让 我 们 拓展 Todortem 例子 来 感受 一 下 (ES6 + JSX) ， 我 已 经 搞 完了 ， 然 后 我 们 
来 过 一 通 看 看 : 


var React = require('react'); 


module.exports = React.createClass({ 
getInitialState() { 
return { 
// 让 我 们 保持 追踪 看 看 我 们 给 项 点 了 多 少 次 赞 
likes: 0, 
3; 
}, 
render() { 
var owner = this.props.owner; 
var task = this.props.task; 
var likes = this.state.likes; 


return <div className='TodoItem'> 

<span className='TodoItem-owner '>{owner}</span> 

<span className='TodoItem-task'>{task}</span> 

<span className='TodoItem-likes'>{likes}</span> 

<span className='TodoItem-like' onClick={this.like}>Like</span> 
</div>; 


this.setState({ 
likes: this.state.likes + 1 
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3); 
}, 
3); 


You can see some basic features of a React component above. First we create a class for our component. After that we 
define some initial state for it, then we render and finally we define some custom callbacks for our handlers if they exist. In 
this case | decided to implement an extra feature, liking. The current implementation just keeps track of the amount of likes 
per component. 


你 可 以 在 上 面 看 到 一 些 基础 的 React 组 件 的 功能 ， 一 开始 我 们 创建 了 一 个 组 件 的 类 ， 然 后 我 们 在 初始 化 的 时 候 定义 一 些 状 
态 ， 然 后 我 们 泻 染 ， 最 后 我 们 定制 了 一 些 回调 。 在 这 个 例子 中 ， 我 决定 去 实施 一 个 额外 的 功能 ， 点 羌 。 这 个 工作 只 是 保持 了 
一 个 跟踪 点 赞 组 件 的 计数 。 


In practice you would transmit like amounts to a backend and add some validation there but this is a good starting point for 
understanding how state works in React. 


在 实践 中 ， 你 需要 把 点 赞 计数 传输 给 后 端 ， 然 后 添加 一 些 验证 ， 不 过 目前 这 个 阶段 对 于 理解 State 在 React 中 的 是 如 何 使 用 
的 已 经 是 一 个 非常 好 的 开端 了 。 


getInitialstate and render are a part of a React component's lifecycle as documented officially. There are additional 
hooks that allow you to do things like set up adapters for jquery plugins and such. 


getInitialstate 和 render 是 React 组 件 的 生命 周期 官方 文档 的 一 部 分 。 也 有 额外 的 能 够 让 你 去 设置 加 载 jquery 插件 之 
类 的 适配器 的 钩子 。 


In this example CSS naming has been modeled after Suit CSS conventions as those look clean to me. That's just one way 
to deal with it. 


在 例子 中 的 CSS 的 命名 是 根据 Suit CSS 约定 处 理 后 的 ， 这 样 对 我 来 说 看 起 来 非常 干净 ， 这 只 是 一 种 解决 方案 而 已 。 


处 理 操作 


Let's say we want to modify the owner of our Todoltems. For the sake of simplicity let's expect it's just a string and owner is 
the same for all Todoltems. Based on this design it would make sense to have an input for owner at our user interface. A 
naive implementation would look something like this: 


让 我 们 来 开始 修改 我 们 的 Todoltems 的 owner， 为 了 简化 这 个 目的 ， 我 们 假设 owner 只 是 一 个 字符 串 而 且 只 有 一 个 ， 基 于 这 
个 设计 ， 在 用 户 界面 里 增加 一 个 输入 框 给 用 户 来 修改 用 户 名 ， 改 动 是 这 样 的 : 


var React = require('react'); 
var TodoItem = require('./TodoItem.jsx'); 


module.exports = React.createClass({ 
getInitialState() { 


return { 
todoItems: [ 
{ 
task: 'Learn React', 
}, 
{ 
task: 'Learn Webpack', 
}, 
{ 
task: 'Conquer World', 
} 


1, 


owner: 'John Doe', 
3; 
}, 
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render() { 
var todoItems = this.state.todoItems; 
var owner = this.state.owner; 


return <div> 
<div className='ChangeOwner '> 
<input type='text' defaultValue={owner} onChange={this.updateOwner} /> 
</div> 


<div className='TodoItems'> 
<ul>{todoItems.map((todoItem, i) => 
<li key={'todoitem' + i}> 
<TodoItem owner={owner} task={todoItem.task} /> 
</li> 
)}</ul> 
</div> 
</div>; 


}, 


updateOwner() { 
this.setState({ 
owner: e.target.value, 
}); 
}, 
4); 


We could push TodoItems and changeowner to Separate components but I've kept it all in the same for now. Given React 
has one way binding by default, we get some extra noise compared to some other setups. React provides ReactLink helper 
to help deal with this particular case. 


我 们 可 以 把 TodoItems 和 changeowner 分 离 出 去 ， 但 是 我 暂时 不 这 么 做 了 。React 默认 提供 了 单 向 数据 绑 定 ， 我 们 可 以 通过 
设置 来 调整 ，React 提供 了 ReactLink 来 提供 双向 数据 绑 定 。 


Even though lack of two way binding might sound like a downer, it actually isn't that bad a thing. It makes it easier to reason 
about the system. You simply have to follow the flow. This idea is highlighted in the Flux architecture. The easiest way to 
visualize it is to think up an infinite waterfall or a snake eating its tail. That's how the flow in the world of React generally 
works. Compared to this two way binding feels more chaotic. 
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流 。 不 过 FB 提出 了 Flux 架构 ， 最 简单 的 方式 去 想 出 一 个 无 限 瀑 布 流 ， 或 者 贪 吃 蛇 ， 就 是 React 的 世界 在 做 的 这 个 数据 流 的 
事情 ， 对 比 这 两 种 绑 定 方式 让 人 感觉 更 加 迷茫 。 


使 用 一 个 Mixin 
If we wanted to model the code above using a ReactLink, we would end up with something like this: 


如 果 我 们 想 使 用 ReactLink 的 话 ， 就 想 下 面 这 样 : 


// ReactLink 是 一 个 插件 ， 所 以 我 们 需要 把 它 引 入 。 
var React = require('react/addons'); 


module.exports = React.createClass({ 
mixins: [React.addons.LinkedStateMixin], 


render() { 
var todoItems = this.state.todoItems; 


return <div> 
<div className='ChangeOwner '> 
<input type='text' valueLink={this.linkState('owner')} /> 
</div> 
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<div className='TodoItems'> 
<ul>{todoItems.map((todoItem, i) => 
<li key={'todoitem' + i}> 
<TodoItem owner={owner} task={todoItem.task} /> 
</li> 
)}</ul> 
</div> 
</div>; 
}, 
J); 


Now we can skip that onchange handler. That React .addons.LinkedStateMixin encapsulates the logic. Mixins provide us one 
way to encapsulate shared concerns such as this into something which can be reused easily. 


现在 我 们 可 以 跳 过 绑 定 onchange 事件 了 ， React.addons.LinkedStatemixin 封装 了 逻辑 。Mixins 给 我 们 提供 了 一 种 可 以 重复 
使 用 的 封装 方法 。 


It would be easy to start expanding the example now. You could for instance provide means to manipulate the 
contents of the Todo list or start extracting various parts into components of their own. It is up to you to make the app 
yours. If you are still feeling a bit lost, please read on. This is supposed to be a brief introduction to the topic! 








现在 拓展 例子 已 经 非常 容易 了 ， 你 现在 应 该 就 可 以 拓展 Todo 列表 ， 或 者 把 各 种 组 件 分 离 ， 这 取决 于 你 。 如 果 你 现在 还 


是 觉得 不 够 掌握 ， 那 么 继续 阅读 ， 这 节 只 是 话题 的 一 个 介绍 。 





测试 


If you get serious about the Todo app, | recommend trying Jest out. Getting the initial test run might be a bit challenging but 
after you learn the basics of the API, it gets a lot simpler. The basic idea is that you instantiate a component with some 
properties and then query DOM using Jest and finally assert that the values in the UI are what you expect. 


如 果 你 觉得 这 个 Todo 应 用 需要 测试 ， 那 么 我 推荐 Jest， 刚 开始 写 测 试用 例 可 能 是 一 点 挑战 但 是 在 你 学 习 一 些 基础 的 API 之 
后 ， 它 会 变 得 更 加 简单 ， 最 基本 的 是 你 实例 化 一 个 带 有 一 些 属性 的 组 件 的 时 候 ， 然 后 用 Jest 查询 DOM， 最 后 断言 界面 中 的 
值 是 你 期 望 的 值 。 


When you go beyond component level, that is where tools such as Selenium come in. You can use standard end to end 
testing tools on a higher level. 


当 你 站 在 组 件 层 级 之 上 时 ， 就 有 了 比如 类 似 Selenium 的 组 件 ， 你 可 以 在 更 高 层级 使 用 标准 的 端 对 端 测试 工具 。 


Flux 架构 及 其 变种 


As you saw above, it is quite simple to throw together a couple of components and start building an app. You can get quite 
far with props and state . Just load up some data over AJAX at getInitialstate and pass it around. After a while this all 
might start feeling a bit unwieldy. Why, for instance, my components should have to know something about how to 
communicate with the backend? 


就 想 你 看 到 的 ， 把 一 些 组 件 放 到 一 起 就 可 以 组 成 一 个 应 用 ， 你 可 以 用 props 和 state 做 的 更 多 ， 或 者 在 getinitialstate 
中 使 用 AJAX 加 载 数据 然后 传 给 其 他 组 件 。 这 些 使 用 一 段 时 间 之 后 可 能 会 觉得 有 些 笨拙 ， 为 什么 ? 实践 中 ， 组 件 们 需要 知道 
如 何 和 后 端 通讯 。 


This is where Flux architecture and its variants come in. | will start by describing Reflux, a simplified variant of it. You can 
then work up to understanding Flux in fuller detail once you understand this simplified setup. 


所 以 出 现 了 Flux 架构 和 它 的 一 些 变种 ， 我 会 介绍 Reflux 一 种 非常 简单 的 Flux 变种 ， 你 可 以 阅读 这 个 understanding Flux 来 
全 面 了 解 Flux。 
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In addition to View Components which we just discussed, Reflux introduces the concepts of Actions and Stores. The flow 
goes like this: Components -> Actions -> Stores -> Components. le. you could have some control in a Component which 

then triggers some Action which then performs some operation (Say PUT) and updates Store state. This state change is 

then propagated to Components listening to the Store. 


FA, Reflux 介绍 了 一 种 Actions 和 Stores 的 概念 去 组 成 刚才 我 们 讨论 的 试图 组 件 。 整 个 数据 流 是 这 样 的 : 组 件 -> Actions 
-> Stores -> 组 件 。 这 样 你 可 以 在 一 个 组 件 中 控制 触发 一 些 Action 然后 执行 一 些 操作 (比如 PUT) 然后 更 新 Store 的 状态 ， 
状态 的 更 新 传播 给 监听 Store 的 那些 组 件 们 。 


In case of our Todo example we would define basic TodoActions like create, update, delete and such. We would also have 
a Todostore . It would maintain a data structure of a TodoList . Our components would then consume that data and display 
it as appropriate. 


在 我 们 的 这 个 Todo 例子 中 ， 我 们 定义 了 一 个 基础 的 Todoactions 上 比如 创建 、 更 新 、 删 除 之 类 的 ， 我 们 也 有 个 Todostore , 
它 是 整个 TodoList 的 数据 结构 中 心 ， 组 件 们 会 读 取 那里 的 数据 ， 然 后 适当 得 展现 出 来 。 


As development of Reflux is quite in flux | won't give you a full example in this case. | just wanted to illustrate one possible 
way to deal with scaling up from bare React. You should explore various options and deepen your understanding of 
possible architectures. The ideas are quite similar but the devil is in the details as always. There are always drawbacks to 
consider. 


Reflux 的 开发 和 Flux 差不多 ， 我 就 不 在 这 里 详细 讲述 了 ， 我 只 是 想 说 明 如 何 处 理 从 纯 React 扩大 的 一 种 可 能 的 方式 。 你 需 
要 去 浏览 一 些 相关 看 法 ， 然 后 深入 理解 那些 架构 。 那 些 想法 都 差不多 ， 就 是 细节 不 太一 样 ， 都 有 各 自 的 一 些 缺 点 有 待考 略 。 


同 构 泻 染 


One of the big features which React provides thanks to its design is so called isomorphic rendering. Back in the day we 
used to render whole HTML in the backend and provide just that for the client to render. Then we would sprinkle a little 
JavaScript magic to make things more interactive and so on. After a while the pendulum swung to frontend side. We served 
minimal amount of HTML to the client and constructed the rest, including routing, using JavaScript entirely on frontend. 


React 设计 了 一 种 叫做 两 端 演 染 的 重要 功能 。 过 去 我 们 在 后 端 泻 染 整个 HTML， 然 后 交 给 客户 端 去 泻 染 ， 然 后 我 们 加 上 一 点 
点 JavaScript 做 的 交互 。 再 后 来 ， 这 个 活 交 给 浏览 器 做 去 ， 后 端 返回 最 小 的 HTML 给 客户 端 ， 然 后 在 客户 端 构 建 了 一 整套 用 
JavaScript 全 权 控 制 的 系统 ， 包 括 路 由 。 


The main problems with frontend driven rendering have to do with performance, high dependency on JavaScript (think of 
the noscript folk!) and poor SEO. With isomorphic rendering you can mitigate these problems effectively. React allows you 
to prerender HTML at backend side. You can also hydrate some stores with pre-existing data making it possible to skip 
certain data queries altogether initially! Even web crawlers will be happy as they get some HTML to scrape. 


前 端 驱 动 泻 染 的 主要 问题 是 性 能 问题 、 JavaScript 的 高 度 依赖 (设想 那些 不 能 运行 JavaScript 的 情况 ) 和 SEO 问题 。 使 用 
两 端 泻 染 ， 你 可 以 轻松 解决 这 些 问题 。React 人 允许 你 在 服务 器 端 预 泻 染 HTML， 你 也 可 以 在 服务 器 端 预 先 存储 一 些 数据 来 跳 
过 初始 化 的 一 些 数 据 查 询 。 甚 至 一 些 网 络 爬 虫 能 够 轻松 地 获取 到 一 些 HTML 内 容 。 


This is still partly uncharted territory. Various implementations of Flux still struggle with the concept. | have no doubt we will 
see stronger solutions in the future, however, as people learn to deal with isomorphism better. That said isomorphic 
rendering can be considered a nice extra capability to have but it definitely isn't something that's just must have. There are 
some ways to work around certain issues, such as poor SEO, even without it. It just depends on where you want to put the 
effort. 


这 一 部 分 仍然 是 一 个 未 知 的 领域 ( 译 者 注 : 原文 发 布 于 2015 年 4 月 ) , RS Flux 的 实现 在 这 个 概念 上 还 没 同 意 ， 但 是 母 庸 置 
疑 ， 我 们 在 未 来 能 够 看 到 更 加 完善 的 解决 方案 ， 无 论 如 何 ， 大 家 会 认识 到 两 端 泻 染 的 好 人 处。 虽然 两 端 泻 染 听 起 来 是 一 个 非常 
好 的 解决 方案 ， 但 是 它 不 是 必要 的 。 现 在 已 经 有 很 多 能 够 解决 这 些 问题 的 方案 ， 比 如 SEO 的 问题 ， 其 至 没有 用 这 种 解决 方 
案 ， 它 只 是 依赖 于 你 想 要 如 何 付出 努力 。 
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安装 React JS 


npm install react --save 
There is really nothing more to it. You can now start using React JS in your code. 


没什么 好 讲 的 ， 接 下 来 就 可 以 在 你 的 代码 中 使 用 React JS 了 。 


在 代码 中 使 用 ReactJS 


component.jsx 


import React from 'react',; 


export default class Hello extends React.Component { 
render() { 
return <hi>Hello world</h1>; 


} 
Y 


main.js 


import React from 'react'; 
import Hello from './component'; 


main(); 


function main() { 
React.render(<Hello />, document.getElementById('app')); 
} 


build/index.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
</head> 
<body> 
<div id="app"></div> 


<script src="http://localhost :8080/webpack-dev-server .js"></script> 
<script src="bundle.js"></script> 
</body> 
</html> 


转换 JSX 


To use the JSX syntax you will need webpack to transform your JavaScript. This is the job of a loader. We'll use Babel as 
it's nice and has plenty of features. 


为 了 能 够 使 用 ISX 语法 ， 你 需要 用 Webpack 来 转 码 你 的 JavaScript， 这 是 加 载 器 的 工作 ， 我 们 可 以 使 用 一 个 很 好 用 也 有 很 
多 功能 的 Babel。 


npm install babel-loader --save-dev 
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Now we have to configure webpack to use this loader. 
现在 我 们 需要 去 配置 Webpack 来 使 用 加 载 器 。 


webpack.config.js 


var path = require('path'); 
var config = { 
entry: path.resolve(__dirname, ‘app/main.js'), 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' 





























}, 
module: { 
loaders: [{ 
test: /\.jsx?$/, // 用 正则 来 匹配 文件 路 径 ， 这 段 意思 是 匹配 js 或 者 jsx 
loader: 'babel' // 加 载 模块 "babel" 是 "babel-loader" 的 缩写 
}] 


3; 


module.exports = config; 


Webpack will test each path required in your code. In this project we are using ES6 module loader syntax, which means 
that the require path of import MyComponent from './Component.jsx'; IS './Component.jsx' 


Webpack 会 在 你 的 项 目 中 测试 所 有 路 径 ， 如 果 我 们 项 目 中 使 用 ES6 模块 加 载 器 语法 ， 比 如 import mycomponent from 


',/Component.jsx'; 是 会 去 匹配 ',/Component.jsx! o 
Run npm run dev in the console and refresh the page to see something. 


在 命令 行 中 运行 npm run dev ， 然 后 刷新 页 面 就 可 以 看 到 修改 。 
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You might notice after requiring React JS into your project that the time it takes from a save to a finished rebundle of your 
application takes more time. In development you ideally want from 200-800 ms rebundle speed, depending on what part of 
the application you are working on. 





你 可 能 注意 到 在 引入 React JS 到 你 的 项 目 之 后 ， 给 你 的 应 用 重新 合并 会 花费 太 多 的 时 间 。 在 开发 环境 中 ， 最 理想 的 是 编译 
最 多 200 到 800 毫秒 的 速度 ， 取 决 于 你 在 开发 的 应 用 。 


在 开发 环境 中 使 用 压缩 文件 


Instead of making Webpack go through React JS and all its dependencies, you can override the behavior in development. 
为 了 不 让 Webpack His React JS 及 其 所 有 依赖 ， 你 可 以 在 开发 中 重 写 它 的 行为 。 


webpack.config.js 


var path = require('path'); 
var node_modules = path.resolve(__dirname, 'node_modules'); 
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); 


config = { 

entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')], 
resolve: { 

alias: { 

"react ' : pathToReact 

i 
}, 
output: { 


path: path.resolve(__dirname, '‘build'), 
filename: 'bundle.js', 


}, 
module: { 
loaders: [{ 
test: /\.jsx?$/, 
loader: 'babel' 
3, 
noParse: [pathToReact] 
} 


T 
module .exports = config; 
We do two things in this configuration: 
我 们 在 配置 中 做 了 两 件 事 : 
1. Whenever "react" is required in the code it will fetch the minified React JS file instead of going to node_modules 
2. Whenever Webpack tries to parse the minified file, we stop it, as it is not necessary 


1 #4 "react" 在 代码 中 被 引入 ， 它 会 使 用 压缩 后 的 React JS 文件 ， 而 不 是 到 node_modules 中 找 。 
2. 每 当 Webpack 尝试 去 解析 那个 压缩 后 的 文件 ， 我 们 阻止 它 ， 因 为 这 不 必要 。 


Take alook at Optimizing development for more information on this. 


可 以 到 优化 开发 看 到 更 多 这 方面 的 信息 。 
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If you come to JavaScript from other programming languages you are familiar with types. You have types in JavaScript too, 
but you do not have to specify these types when declaring variables, receiving arguments etc. This is one of the things that 
makes JavaScript great, but at the same time not so great. 


如 果 你 是 从 其 他 你 更 熟悉 类 型 的 编程 语言 转 到 JavaScript 的 ， 那 么 ， 你 也 可 以 在 JavaScript 中 使 用 类 型 ， 不 过 你 不 需要 在 声 
明 变 量 或 者 接收 参数 的 时 候 指定 类 型 。 这 可 以 让 你 的 代码 更 加 优雅 ， 但 是 不 是 最 优雅 的 。 


Specifically when working on very large projects with many developers type checking gives stability to your project, much 
like a good test does. So using Flow is definitely not a requirement. It is for developers who depends on type checking as 
more of a routine and for the before mentioned large projects with many developers. Webpack makes it easy to include 
Flow in your workflow. 


具体 来 说 ， 当 你 在 一 个 大 项 目 中 和 很 多 开发 者 一 起 工作 的 时 候 ， 类 型 检查 对 你 的 项 目 来 讲 是 保证 了 稳定 性 ， 就 像 一 个 很 好 的 


测试 做 的 事情 。 所 以 使 用 Flow 当然 不 是 必要 条 件 。 对 于 那些 需要 和 很 多 开发 者 一 起 做 大 项 目的 开发 者 来 说 类 型 检测 是 一 种 
非常 寻常 的 事 。Webpack 引入 Flow 之 后 会 非常 方便 。 


安装 flow 


© 还 没 尝试 : ) 
e 尝试 一 下 "flowcheck-loader"? https://www.npmjs.com/package/flowcheck-loader (还 没 用 过 : ) ) 
e https://tryflow.org/ 
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Webpack allows you to load CSS like you load any other code. What strategy you choose is up to you, but you can do 
everything from loading all your css in the main entry point file to one css file for each component. 


Webpack 人 允许 像 加 载 任何 代码 一 样 加 载 CSS。 你 可 以 选择 你 所 需要 的 方式 ， 但 是 你 可 以 为 每 个 组 件 把 所 有 你 的 CSS 加 载 到 
入 口 主 文件 中 来 做 任何 事情 。 


Loading CSS requires the css-loader and the style-loader. They have two different jobs. The css-loader will go through 
the CSS file and find ur1() expressions and resolve them. The style-loader will insert the raw css into a style tag on your 
page. 


加 载 CSS 需要 css-loader 和 style-loader， 他 们 做 两 件 不 同 的 事情 ，css-loader 会 通 历 CSS 文件 ， 然 后 找到 urio 表达 
式 然后 处 理 他 们 ，style-loader 会 把 原来 的 CSS 代码 插入 页 面 中 的 一 个 style 标签 中 。 


准 各 加载 CSS 


Install the two loaders: npm install css-loader style-loader --save-dev . 
安装 这 两 个 加 载 器 : npm install css-loader style-loader --save-dev 

In the webpack.config.js file you can add the following loader configuration: 
你 可 以 把 下 面 的 加 载 器 配置 加 到 Webpack.config.js 文件 中 。 


webpack.config.js 


var path = require('path'); 
var config = { 
entry: path.resolve(__dirname, ‘app/main.js') 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
test: /\.jsx$/, 
loader: 'jsx' 
ip a 
test: /\.css$/, // Only .css files 
loader: 'style!css' // Run both loaders 
JI 
} 
H 


module.exports = config; 


加 载 CSS 文件 


Loading a CSS file is a simple as loading any file: 
加 载 一 个 CSS 文件 就 和 加 载 其 他 文件 一 样 简单 : 


main.js 


import './main.css'; 
// Other code 


Component.jsx 
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import './Component.css'; 
import React from 'react'; 


export default React.createClass({ 
render: function () { 
return <h1>Hello world!</h1> 


} 
3); 


Note! You can of course do this with both CommonJS and AMD. 


注意 1 你 也 可 以 在 CommonJs 和 AMD 中 做 同样 的 事情 。 


CSS 加 载 策略 


Depending on your application you might consider three main strategies. In addition to this you should consider including 
some of your basic CSS inlined with the initial payload (index.html). This will set the structure and maybe a loader while the 
rest of your application is downloading and executing. 


根据 你 的 应 用 ， 你 可 能 会 考 略 三 种 策略 。 另 外 ， 你 需要 考虑 把 一 些 基础 的 CSS 内 联 到 初始 容器 中 (index.html) ， 这 样 设置 
的 结构 能 够 在 应 用 下 载 和 执行 的 时 候 加 载 剩 下 的 应 用 。 


所 有 合并 成 一 个 
In your main entry point, e.g. app/main.js you can load up your entire CSS for the whole project: 
在 你 的 主 入 口 文件 中 个 ， 比 如 app/main.js 你 可 以 为 整个 项 目 加 载 所 有 的 CSS : 


app/main.js 


import './project-styles.css'; 
// 其 他 Is 代码 





The CSS is included in the application bundle and does not need to download. 


CSS 就 完全 包含 在 合并 的 占用 中 ， 再 也 不 需要 重新 下 载 。 


HIR 


If you take advantage of lazy loading by having multiple entry points to your application, you can include specific CSS for 
each of those entry points: 


如 果 你 想 发 挥 应 用 中 多 重 入 口 文 件 的 优势 ， 你 可 以 在 每 个 入 口 点 包含 各 自 的 CSS : 


app/main.js 


import './style.css'; 
// 其 他 JS 代码 














app/entryA/main.js 


import './style.css'; 
// 其 他 JS 代码 
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app/entryB/main.js 


import './style.css'; 
// 其 他 JS 代码 














You divide your modules by folders and include both CSS and JavaScript files in those folders. Again, the imported CSS is 
included in each entry bundle when running in production. 





你 把 你 的 模块 用 文件 夹 分 离 ， 每 个 文件 夹 有 各 自 的 CSS 和 JavaScript 文件 。 再 次 ， 当 应 用 发 布 的 时 候 ， 导 入 的 CSS 已 经 加 
载 到 每 个 入 口 文件 中 。 


具体 的 组 件 


With this strategy you create a CSS file for each component. It is common to namespace the CSS classes with the 
component name, thus avoiding some class of one component interfering with the class of an other. 


你 可 以 根据 这 个 策略 为 每 个 组 件 创 建 CSS 文件 ， 可 以 让 组 件 名 和 CSS 中 的 class 使 用 一 个 命名 空间 ， 来 避免 一 个 组 件 中 的 
一 些 class 干扰 到 另外 一 些 组 件 的 class。 


app/components/MyComponent.css 


.MyComponent-wrapper { 
background-color: #EEE; 
} 


app/components/MyComponent.jsx 


import './MyComponent.css'; 
import React from 'react',; 


export default React.createClass({ 
render: function () { 
return ( 
<div className="MyComponent -wrapper"> 
<hi>Hello world</h1> 
</div> 


3); 


使 用 内 联 样 式 取 代 CSS 文件 


With "React Native" you do not use stylesheets at all, you only use the style-attribute. By defining your CSS as objects. 
Depending on your project, you might consider this as your CSS strategy. 





在 “React Native” 中 你 不 再 需要 使 用 任何 CSS 文件 ， 你 只 需要 使 用 style 属性 ， 可 以 把 你 的 CSS 定义 成 一 个 对 象 ， 那 样 就 
可 以 根据 你 的 项 目 重新 来 考 略 你 的 CSS 策略 。 


app/components/MyComponent.jsx 


import React from 'react'; 


var style = { 
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backgroundColor: '#EEE' 
J; 


export default React.createClass({ 
render: function () { 
return ( 
<div style={style}> 
<hi>Hello world</h1> 
</div> 


3); 
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When webpack-dev-server is running with Automatic browser refresh the CSS will also update, but a bit differently. When 
you do a change to a CSS file the style tag belonging to that file will be updated with the new content... without a refresh! 


当 Webpack-dev-server 在 浏览 器 自动 刷新 下 运行 的 时 候 ，CSS 也 会 自动 更 新 ， 不 过 有 点 不 同 的 是 ， 当 你 改变 了 一 个 CSS 
文件 ， 属 于 那个 文件 的 标签 会 更 新 新 的 内 容 但 不 会 刷新 。 
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If you want to use compiled CSS, there are two loaders available for you. The less-loader and the sass-loader. 
Depending on your preference, this is how you set it up. 


如 果 你 想 使 用 编译 CSS， 这 里 有 两 种 可 用 的 加 载 器 less-loader 和 sass-loader， 看 你 喜欢 哪 种 。 下 面 是 如 何 设 置 。 


安 闭 和 设置 加 载 器 


npm install less-loader Or npm install sass-loader 


npm install less-loader 或 者 npm install sass-loader . 


webpack.config.js 


var path = require('path'); 
var config = { 


entry: path.resolve(__dirname, 


output: { 


path: path.resolve(__dirname, 


filename: 'bundle.js' 


}, 
module: { 
loaders: [{ 
test: /\.jsx$/, 
loader: 'jsx' 
}, 
(I LESS 
{ 
test: /\.less$/, 
loader: 'style!css!less' 
}, 
// SASS 
{ 
test: /\.scss$/, 
loader: 'style!css!sass' 
}] 
} 
J; 


LESS 和 SASS 中 的 imports 怎么 办 ? 


‘app/main.js') 


uo ye 


If you import one LESS/SASS file from an other, use the exact same pattern as anywhere else. Webpack will dig into these 
files and figure out the dependencies. 


如 果 你 从 另外 一 个 文件 中 导入 一 个 LESS/SASS 文件 ， 像 其 他 地 方 一 样 使 用 准确 的 路 径 ，Webpack 会 找 出 那些 文件 ， 然 后 识 


别 里 面 的 依赖 。 


@import "./variables.less"; 


You can also load LESS files directly from your node_modules directory. 


你 也 可 以 直接 从 你 的 node_modules 文件 夹 中 加 载 LESS 文件 。 


$import "~bootstrap/less/bootstrap"; 


加 载 LESS 和 SASS 
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Until HTTP/2 is here you want to avoid setting up too many HTTP requests when your application is loading. Depending on 
the browser you have a set number of requests that can run in parallel. If you load a lot of images in your CSS it is possible 
to automatically inline these images as BASE64 strings to lower the number of requests required. This can be based on the 
size of the image. There is a balance of size of download and number of downloads that you have to figure out for your 
project, and Webpack makes that balance easy to adjust. 


直到 HTTP/2 你 才能 在 应 用 加 载 的 时 候 避 免 设 置 太 多 HTTP 请 求 。 根 据 浏览 器 不 同 你 必须 设置 你 的 并 行 请 求 数 ， 如 果 你 在 你 
的 CSS 中 加 载 了 太 多 图 片 的 话 ， 可 以 自动 把 这 些 图 片 转 成 BASES 字符 串 然后 内 联 到 CSS 里 来 降低 必要 的 请 求 数 ， 这 个 方 
法 取决 与 你 的 图 片 大 小 。 你 需要 为 你 的 应 用 平衡 下 载 的 大 小 和 下 载 的 数量 ， 不 过 Webpack 可 以 让 这 个 平衡 十 分 轻松 适应 。 


安装 url-loader 


npm install url-loader --save-dev will install the loader that can convert resolved paths as BASE64 strings. As mentioned 
in other sections of this cookbook Webpack will resolve “url()" statements in your CSS as any other require or import 
statements. This means that if we test on image file extensions for this loader we can run them through it. 


npm install url-loader --save-dev 来 安装 加 载 器 ， 它 会 把 需要 转换 的 路 径 变 成 BASE64 字符 串 ， 在 其 他 的 Webpack # 
提 到 的 这 方面 会 把 你 CSS HÉ “uro” 像 其 他 require 或 者 import 来 人 处理。 意味 着 如 果 我 们 可 以 通过 它 来 处 理 我 们 的 图 片 文 
件 。 


var path = require('path'); 
var config = { 
entry: path.resolve(__dirname, ‘app/main.js') 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
test) /N.jisx$/, 
loader: 'jsx' 
jt 
test: /\.(png|jpg)$/, 
loader: 'url?limit=25000' 
}] 
} 
i; 


The limit is an argument passed to the url-loader. It tells it that images that er 25KB or smaller in size will be converted to a 
BASE64 string and included in the CSS file where it is defined. 


url-loader 传 入 的 limit 参数 是 告诉 它 图 片 如 果 不 大 于 25KB 的 话 要 自动 在 它 从 属 的 css 文件 中 转 成 BASES 字符 串 。 
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Fonts can be really difficult to get right. First of all we have typically 4 different formats, but only one of them will be used by 
the respective browser. You do not want to inline all 4 formats, as that will just bloat your CSS file and in no way be an 
optimization. 


字体 实在 是 非常 难 引入 正确 ， 首 先 ， 通 常 我 们 有 4 种 不 一 样 的 格式 ， 但 是 只 有 其 中 一 种 会 被 对 应 的 浏览 器 使 用 到 。 你 肯定 不 
会 想 引 入 全 部 四 种 格式 ， 这 样 只 会 让 CSS 文件 更 加 膨胀 ， 然 后 又 没 办 法 优化 。 


选择 一 种 格式 


Depending on your project you might be able to get away with one font format. If you exclude Opera Mini, all browsers 
support the .woff and .svg format. The thing is that fonts can look a little bit different in the different formats, on the different 
browsers. So try out .woff and .svg and choose the one that looks the best in all browsers. 


取决 与 你 的 项 目 ， 你 可 能 可 以 选择 出 一 种 字体 格式 ， 如 果 你 不 考 略 Opera Mini， 所 有 的 浏览 器 都 支持 .woff 和 .svg 格式 。 问 
题 是 不 同 格式 下 在 各 种 浏览 器 下 字体 看 起 来 会 有 一 点 点 不 同 。 所 以 测试 .woff 和 .svg， 然 后 找 出 能 够 在 所 有 浏览 器 中 看 起 来 
最 好 的 那个 。 


There are probably other strategies here too, so please share by creating an issue or pull request. 


如 果 有 其 他 更 好 的 策略 ， 那 请 通过 创建 issue 或 者 提 PullRequest 来 分 享 。 


RP 
实践 
You do this exactly like you do when inlining images. 


就 像 内 联 图 片 一 样 来 内 联 字体 。 


var path = require('path'); 
var config = { 
entry: path.resolve(__dirname, ‘app/main.js') 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
test: /\.jsx$/, 
loader: 'jsx' 
in a 
test: /\.woff$/, 
loader: 'url?limit=100000' 
J 
} 
J; 


Just make sure you have a limit above the size of the fonts, or they will of course not be inlined. 
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There are two things you want to do preparing for a production build. 
这 里 有 两 件 事 你 需要 为 生产 发 布 做 准备 。 


1. Configure a script to run in your package.json file 
2. Create a production config 


1. 配置 你 的 package.json 里 的 脚本 
2. 创建 一 个 生产 的 配置 


创建 脚本 


We have already used package.json to create the npm run dev script. Now let us set up npm run deploy . 


我 们 已 经 使 用 过 package.json 来 创建 npm run dev 的 脚本 ， 现 在 让 我 们 设置 npm run deploy o 


"name": "my-project", 
"version": "0.0.0" 
"description": "My awesome project!", 
"main": "app/main.js", 
Salle 
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", 
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js" 
}, 
Waurehorg ee, 
Macense!s:, LISCI, 
"devDependencies": { 
"webpack": "A1.4,13", 
"webpack-dev-server": "A1.6.6" 
}, 


"dependencies": {} 


As you can see we are just running webpack with the production argument and pointing to a different configuration file. We 
also use the environment variable "production" to allow our required modules to do their optimizations. Lets us create the 
config file now. 


正如 你 所 见 ， 我 们 只 是 用 生产 参数 运行 Webpack 来 指向 另 一 个 配置 文件 。 我 们 也 使 用 了 环境 变量 “production" 来 让 我 们 的 
模块 自动 去 优化 。 让 我 们 开始 来 创建 配置 文件 。 


创建 生产 配置 


So there really is not much difference in creating the dev and production versions of your webpack config. You basically 
point to a different output path and there are no workflow configurations or optimizations. What you also want to bring into 
this configuration is cache handling. 


可 以 看 到 ， 其 实生 产 环 境 的 配置 和 开发 的 配置 没有 太 大 的 不 同 ， 主 要 的 不 同 是 指向 了 一 个 不 同 的 输出 路 径 ， 然 后 也 没有 了 
workflow 的 配置 和 优化 ， 可 以 看 到 新 加 入 到 配置 里 的 是 义理 缓存 的 配置 。 


var path = require('path'); 
var node_modules_dir = path.resolve(__dirname, 'node_modules'); 


var config = { 

entry: path.resolve(__dirname, ‘app/main.js'), 

output: { 
path: path.resolve(__dirname, '‘dist'), 
filename: 'bundle.js' 

}, 

module: { 
loaders: [{ 
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Eesti /Ne 


// There is not need to run the loader through 
// vendors 

// 这 里 再 也 不 需 通过 任何 第 三 方 来 加 载 

exclude: [node_modules_dir] 

loader: 'babel' 




















} 
3; 


module.exports = config; 


Run npm run deploy in the root of the project. Webpack will now run in production mode. It does some optimizations on its 
own, but also React JS will do its optimizations. Look into caching for even more production configuration. 


在 项 目 根 目录 处 运行 npm run deploy, Webpack 现在 会 运行 生产 模式 ， 他 会 自动 做 一 些 优 化 ， 不 过 ，React Js 也 会 做 自己 
的 优化 。 可 以 深入 了 解 缓存 处 理 来 做 更 多 的 生产 配置 。 


发 布 配置 
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Lets have a look at the simplest setup you can create for your application. Use a single bundle when: 


让 我 们 看 一 下 为 应 用 创建 的 最 简单 的 配置 ， 只 有 在 下 面 的 情况 下 才 使 用 单 人 口 模式 : 


e You have a small application 
e You will rarely update the application 
e You are not too concerned about perceived initial loading time 


e 应 用 很 小 
e 很 少 会 更 新 应 用 
e 你 不 太 关 心 初始 加 载 时 间 


webpack.production.config.js 


var path = require('path'),; 
var config = { 
entry: path.resolve(__dirname, ‘app/main.js'), 
output: { 
path: path.resolve(__dirname, '‘dist'), 
filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
test: /\.js$/, 
loader: 'babel' 
JI 
} 
J; 


module.exports = config; 


合并 成 单 文件 
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When your application is depending on other libraries, especially large ones like React JS, you should consider splitting 


those dependencies into its own vendors bundle. This will allow you to do updates to your application, without requiring the 


users to download the vendors bundle again. Use this strategy when: 


当 你 的 应 用 依赖 其 他 库 尤 其 是 像 React JS 这 种 大 型 库 的 时 候 ， 你 需要 考虑 把 这 些 依赖 分 离 出 去 ， 这 样 就 能 够 让 用 户 在 你 更 


新 应 用 之 后 不 需要 再 次 下 载 第 三 方 文件 。 当 满足 下 面 几 个 情况 的 时 候 你 就 需要 这 人 么 做 了 : 


e When your vendors reaches a certain percentage of your total app bundle. Like 20% and up 

e You will do quite a few updates to your application 

e You are not too concerned about perceived initial loading time, but you do have returning users and care about 
optimizing the experience when you do updates to the application 

e Users are on mobile 


e 当 你 的 第 三 方 的 体积 达到 整个 应 用 的 20% 或 者 更 高 的 时 候 。 

e 更 新 应 用 的 时 候 只 会 更 新 很 小 的 一 部 分 

e 你 没有 那么 关注 初始 加 载 时 间 ， 不 过 关注 优化 那些 回访 用 户 在 你 更 新 应 用 之 后 的 体验 。 
° 有 手机 用 户 。 


webpack.production.config.js 


var path = require('path'); 
var webpack = require('webpack'); 
var node_modules_dir = path.resolve(__dirname, 'node_modules'); 


var config = { 
entry: { 
app: path.resolve(__dirname, ‘app/main.js'), 


// Since react is installed as a node module, node_modules/react, 
// we can point to it directly, just like require('react'); 
// 当 React 作为 一 个 node 模块 安装 的 时 候 ， 
// 我 们 可 以 直接 指向 它 ， 就 比如 require('react') 
vendors: ['react'] 
}, 
output: { 
path: path.resolve(__dirname, ‘dist'), 
filename: 'app.js' 


}, 
module: { 
loaders: [{ 
tests) /NN S$ 
exclude: [node_modules_dir] 
loader: 'babel' 
}] 
}, 
plugins: [ 


new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') 
] 
J; 


module.exports = config; 
This configuration will create two files in the dist/ folder. app.js and vendors.js. 
这 些 配 置 会 在 dist/ 文件 夹 下 创建 两 个 文件 : app.js 和 vendors.js. 
重要 的 事情 ! 


Remember to add both files to your HTML file, or you will get the error: Uncaught ReferenceError: webpackJsonp is not 


defined. 


记 住 要 把 这 些 文件 都 加 入 到 你 的 HTML 代码 中 ， 不 然 你 会 得 到 一 个 错误 : uncaught ReferenceError: webpackJsonp is not 











分 离 应 用 和 第 三 
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defined 。 








`i 3 应 上 和 第 三 
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Maybe you are building an application that has multiple urls. An example of this would be a solution where you have two, or 
more, different URLs responding with different pages. Maybe you have one user page and one admin page. They both 
share a lot of code, but you do not want to load all the admin stuff for normal users. That is a good scenario for using 
multiple entry points. A list of use cases could be: 


你 的 应 用 可 能 有 多 个 路 径 ， 就 是 应 用 中 有 两 个 或 者 多 个 URL 相应 不 同 的 页 面 ， 这 里 就 是 提供 这 样 的 解决 方案 。 可 能 你 有 一 
个 普通 用 户 页 和 一 个 管理 员 页 ， 他 们 共享 了 很 多 代码 ， 但 是 不 想 在 普通 用 户 页 中 加 载 所 有 管理 员 页 的 代码 ， 所 以 好 方案 是 使 
用 多 重 入 口 。 使 用 缘由 有 下 面 几 条 : 


e You have an application with multiple isolated user experiences, but they share a lot of code 
e You have a mobile version using less components 
e You have a typical user/admin application where you do not want to load all the admin code for a normal user 


e 你 的 应 用 有 多 种 不 同 的 用 户 体验 ， 但 是 他 们 共享 了 很 多 代码 。 
e 你 有 一 个 使 用 更 少 组 件 的 手机 版 本 
o 你 的 应 用 是 典型 的 权限 控制 ， 你 不 想 为 普通 用 户 加 载 所 有 管理 用 户 的 代码 。 


Let us create an example with a mobile experience using less components: 
让 我 们 创建 一 个 使 用 更 少 组 件 的 手机 页 面 的 例子 : 


webpack.production.config.js 


var path = require('path'); 
var webpack = require('webpack'); 
var node_modules_dir = path.resolve(__dirname, 'node_modules'); 


var config = { 

entry: { 
app: path.resolve(__dirname, ‘app/main.js'), 
mobile: path.resolve(__dirname, 'app/mobile.js'), 
vendors: ['react'] // 其 他 库 

}, 

output: { 
path: path.resolve(__dirname, '‘dist'), 
filename: '[name].js' // 注意 我 们 使 用 了 变量 



































}, 
module: { 
loaders: [{ 
Eesti AAS 
exclude: [node_modules_dir] 
loader: 'babel' 
J 
}, 
plugins: [ 


new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') 
] 
J; 


module.exports = config; 
This configuration will create three files in the dist/ folder. app.js, mobile.js and vendors.js. Most of the code in the 
mobile.js file also exists in app.js, but that is what we want. We will never load app.js and mobile.js on the same page. 


这 个 配置 会 在 dist/ 文件 夹 下 创建 三 个 文件 : app.js、mobile.js 和 vendors.js， 大 部 分 的 代码 在 mobile.js 文 件 中 ， 也 有 一 
部 分 在 app.js 中 ， 不 过 这 是 我 们 需要 的 ， 我 们 不 会 在 同一 个 页 面 中 同时 加 载 app.js 和 mobile.js。 





N 
> 
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It is also possible to lazy load entry points. This means that you load parts of your application as they are requested. A 
typical scenario for this would be that your users only visits specific parts of the application. And an example of that would 


be twitter.com. You do not always visit your profile page, so why load the code for that? Here is a summary of requirements: 


Webpack 也 可 以 实现 懒 加 载 入 口 文件 ， 意 味 着 应 用 的 一 部 分 只 在 需要 的 时 候 加 载 ， 一 个 典型 的 例子 是 用 户 只 有 访问 一 些 应 用 
特定 的 部 分 ， 典 型 的 例子 是 Twitter.com， 你 不 会 一 直 访 问 你 的 个 人 页 ， 所 以 为 什么 要 加 载 那 部 分 的 代码 ? 这 里 有 个 主要 的 要 


求 : 


e You have a relatively big application where users can visit different parts of it 


e You do care a lot about initial render time 


e 你 有 一 个 相对 比较 大 的 应 用 ， 可 以 让 用 户 可 以 访问 应 用 的 不 同 部 分 。 


o 你 非常 关注 初始 渲染 时 间 


webpack.production.config.js 


var path = require('path'); 
var webpack = require('webpack'); 


var node_modules_dir = path.resolve(__dirname, 


var config = { 
entry: { 


app: path.resolve(__dirname, ‘app/main.js'), 


vendors: ['react'] 

}, 

output: { 
path: path.resolve(__dirname, ‘dist'), 
filename: ‘app.js' 


}, 
module: { 
loaders: [{ 
test yN JESSI, 
exclude: [node_modules_dir] 
loader: 'babel' 
JI 
}, 
plugins: [ 


new webpack.optimize.CommonsChunkPlugin('vendors', 


] 
3; 


module.exports = config; 


"node_modules'); 


So we are pretty much back where we started with a split application and vendors bundle. You do not really define your lazy 


dependencies in a configuration, Webpack automatically understands them when analyzing your code. So let us see how 


we would lazy load a profile page: 


所 以 我 们 把 应 用 和 第 三 方 分 离 是 一 件 非常 漂亮 的 事 ， 你 不 需要 在 配置 中 设置 懒 加 载 依赖 ，Webpack 会 自动 理解 他 们 ， 然 后 分 


析 你 的 代码 。 所 以 让 我 们 看 看 我 们 是 如 何 加 载 一 个 个 人 信息 页 : 


main.js (使 用 ES6 语法) 


import React from 'react'; 
import Feed from './Feed.js'; 


class App extends React.Component { 
constructor() { 
this.state = { currentComponent: Feed }; 
} 
openProfile() { 
require.ensure([], () => { 
var Profile = require('./Profile.js'); 
this.setState({ 
currentComponent: Profile 


懒 加 载 入 口 文件 
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3); 
}); 
} 
render() { 
return ( 
return <div>{this.state.currentComponent()}</div> 
); 
} 
} 


React.render(<App/>, document.body); 


So this is just an example. You would probably hook this up to a router, but the important part is using require.ensure . 
这 只 是 一 个 例子 ， 你 需要 把 这 些 写 入 到 一 个 路 由 中 个 ， 不 过 重要 的 事情 是 使 用 了 require.ensure o 


What is the array on the first argument?: If you try to lazy load a chunk that depends on an other lazy loaded chunk you 
can set it as a dependency in the array. Just type in the path to the chunk. E.g. ['./FunnyButton.js'] 


第 一 个 数组 参数 是 什么 ? : 如 果 你 尝试 去 懒 加 载 一 段 由 另 一 个 懒 加 载 的 代码 加 载 的 代码 的 话 ， 把 它 作为 依赖 写 在 数组 里 ， 就 
把 路 径 写 进去 ， 上 比如 ['./FunnyButton.js'] 
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So the great thing about React JS is that it runs on the server too. But that does not mean you can just create any app and 
run it on the server. You have to make some decisions on the architecture. The reason is that even though React JS and 
the components run on the server, you might be having dependencies in those components that does not run on the server. 


React Js 最 伟大 的 地 方 是 它 也 可 以 运行 在 服务 端 ， 不 过 这 不 意味 着 你 可 以 创建 任何 一 个 应 用 然后 运行 在 服务 端 ， 你 需要 做 一 
些 决策 和 架构 。 原 因 是 哪怕 React JS 和 一 些 组 件 可 以 在 服务 端 运 行 ， 但 还 是 有 一 些 组 件 中 的 依赖 不 能 在 服务 端 运行 。 


注 太 状态 


One of the most important decisions you make is to inject the state of your application through the top component. This 
basically means that your components does not have any external dependencies at all. All they need to know comes 
through this injected state. 


一 个 重要 的 事情 是 应 用 需要 通过 顶层 组 件 把 状态 注入 ， 这 意味 着 你 的 组 件 没 有 了 任何 的 外 部 依赖 ， 他 们 只 能 通过 注入 的 状态 
来 获取 信息 。 


This cookbook is not about isomorphic apps, but let us take a look at an example. We will not use ES6 syntax here 
because Node JS does not support it yet. 


这 本 小 书 不 是 主要 讲 同 构 泻 染 的 应 用 ， 不 过 让 我 们 来 看 一 下 例子 ， 我 们 这 次 不 使 用 ES6 语法 了 ， 因 为 Node JS 还 不 完全 支 
持 。 


main.js (client) 


var React = require('react'); 
var AppState = require('./client/AppState.js'); 
var App = require('./App.js'); 


React.render(<App state={AppState}/>, document.body) ; 


router.js (Server) 


var React = require('react'); 

var App = require('./App.js'); 

var AppState = require('./server/AppState.js'); 

var index = '<!DOCTYPE html><html><head></head><body>{ {component }}</body></htm1>' ; 


app.get('/', function (reg, res) { 
var componentHtml = React.renderToString(App({state: AppState})); 
var html = index.replace('{{component}}', componentHtml) ; 
res.type('html'); 
res.send(htm1); 


}); 


So this was a very naive and simple way of showing it, but what you should notice here is that we use the same App.js file 
on the client and server, but we have two different ways of producing the state. 


所 以 这 是 一 个 非常 初级 且 简单 的 例子 来 展示 它 ， 不 过 你 需要 注意 的 是 我 们 在 客户 端 和 服务 端 使 用 了 同一 个 App.js， 但 是 我 们 
需要 两 种 方式 来 提供 状态 。 
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TODO: what to discuss in intro? Maybe summarize what makes a pro. Like using hot loader, caching etc. hm hm... 
maybe look at it after the sub pages are done, cherry on the top :-) 


41 


react-webpack-cookbook 


We talked about how you could use the minified versions of your dependencies in development to make the rebundling go 
as fast as possible. Let us look at a small helper you can implement to make this a bit easier to handle. 


之 前 介绍 了 如 何在 开发 中 使 用 依赖 的 压缩 版 本 来 让 合并 尽 可 能 加 速 ， 让 我 们 看 一 下 这 个 小 的 例子 来 让 你 更 加 轻松 去 义理 : 


webpack.config.js 


var webpack = require('webpack'); 
var path = require('path'); 
var node_modules_dir = path.join(__dirname, 'node_modules'); 


var deps = [ 
"react/dist/react.min.js', 
"react-router/dist/react-router.min.js', 
‘moment/min/moment.min.js', 
"underscore/underscore-min.js', 


1; 


var config = { 
entry: ['webpack/hot/dev-server', './app/main.js'] 
output: { 
path: path.resolve(__dirname, './build'), 
filename: 'bundle.js' 
}, 
resolve: { 
alias: {} 
}, 
module: { 
noParse: [], 
loaders: [] 


// Run through deps and extract the first part of the path, 

// as that is what you use to require the actual node modules 

// in your code. Then use the complete path to point to the correct 
// file and make sure webpack does not try to parse it 

// 通过 在 第 一 部 分 路 径 的 依赖 和 解压 

// 就 是 你 像 引 用 node 模块 一 样 引入 到 你 的 代码 中 
// 然后 使 用 完整 路 径 指 向 当前 文件 ， 然 后 确认 Webpack 不 会 尝试 去 解析 它 






































deps.forEach(function (dep) { 
var depPath = path.resolve(node_modules_dir, dep); 
config.resolve.alias[dep.split(path.sep)[0]] = depPath; 
config.module.noParse.push(depPath) ; 


3); 


module.exports = config; 
Not all modules include a minified distributed version of the lib, but most do. Especially with large libraries like React JS you 
will get a significant improvement. 


不 是 所 有 的 模块 需要 一 个 压缩 的 版 本 ， 不 过 大 多 数 需要 ， 尤 其 是 像 React JS 这 种 大 型 库 ， 之 后 你 会 有 明显 的 提升 。 


把 React 暴露 到 全 局 中 


You might be using distributed versions that requires React JS on the global scope. To fix that you can install the expose- 
loader by npm install expose-loader --save-dev and set up the following config, focusing on the module property: 


你 可 能 在 全 局 中 使 用 了 一 个 压缩 版 本 的 React， 为 了 修复 你 可 以 安装 这 个 暴露 全 局 加 载 器 npm install expose-loader --save- 
dev ， 然 后 像 下 面 这 样 配 置 ， 注 意 module 属性 : 


var webpack = require('webpack'); 
var path = require('path'); 
var node_modules_dir = path.join(__dirname, 'node_modules'); 
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var deps = [ 
"react/dist/react.min.js', 
"react-router/dist/react-router.min.js', 
‘moment/min/moment .min.js', 
"underscore/underscore-min.js', 


1; 


var config = { 
entry: ['webpack/hot/dev-server', './app/main.js'], 
output: { 
path: path.resolve(__dirname, './build'), 
filename: 'bundle.js' 


}, 

resolve: { 
alias: {} 

}, 

module: { 


noParse: [], 


// Use the expose loader to expose the minified React JS 
// distribution. For example react-router requires this 
// 使 用 暴露 全 局 加 载 器 来 暴露 压缩 版 的 React JS， 比 如 react-router 需要 这 个 。 
loaders: [{ 
test: path.resolve(node_modules_dir, deps[0]), 
loader: "expose?React" 


J 
































} 
3; 


deps.forEach(function (dep) { 
var depPath = path.resolve(node_modules_dir, dep); 
config.resolve.alias[dep.split(path.sep)[0]] = depPath; 
config.module.noParse.push(depPath) ; 


}); 


module.exports = config; 
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So this part is just freakin' awesome. With React JS and the react-hot-loader you can change the class code of your 
component and see the instances update live in the DOM, without loosing their state! This is pretty much exactly how CSS 
updates behave, only that it is your components. 


PRO PS hh BR. EH React JS 和 react-hot-loader 可 以 让 你 去 改变 组 件 中 的 class 代码 ， 然 后 可 以 在 DOM 上 
看 到 实时 更 新 了 实例 ， 没 有 修改 他 们 的 状态 ! 看 起 来 就 像 CSS 更 新 一 样 ， 不 过 是 换 成 了 组 件 。 


z E 


This setup requires that you use the webpack-dev-server as introduced in earlier chapters. Now we just have to install the 
loader with npm install react-hot-loader --save-dev , do a small config change: 


这 个 设置 需要 你 使 用 前 面 章 节 中 介绍 的 webpack-dev-server， 现 在 我 们 需要 去 安装 加 载 器 npm install react-hot-loader -- 
save-dev ， 然 后 做 一 点 配置 : 


var webpack = require('webpack'); 
var path = require('path'); 


var config = { 
entry: ['webpack/hot/dev-server', './app/main.js'] 
output: { 
path: path.resolve(__dirname, './build'), 
filename: 'bundle.js' 























}, 
module: { 
loaders: [{ 
test: /\.js$/, 
// Use the property "loaders" instead of "loader" and 
// add "react-hot" in front of your existing "jsx" loader 
// 使 用 "loaders" 属性 代替 "loader" 
// 然后 在 "jsx" 加 载 器 之 前 添加 “react-hot" 
loaders: ['react-hot', 'babel'] 
}] 
} 


3; 


module.exports = config; 


And you will also need a small snippet of code in your main entry file. In the example above that would be the main.js file 
located in the app/ folder. 


同时 你 也 需要 在 你 的 主 入 口 文件 做 一 些 修改 ， 例 子 中 ， 在 apps 文件 夹 中 的 main.js 像 下 面 那样 修改 : 


app/main.js 


// You probably already bring in your main root component, 
// maybe it is your component using react-router 

// 你 可 能 已 经 把 你 的 根 组 件 引 入 了 

// 组 件 可 能 用 了 react-router 

var RootComponent = require('./RootComponent.jsx'); 




















// When you render it, assign it to a variable 
// 当 你 泻 染 它 的 时 候 ， 让 它 赋 值 给 一 个 变量 
var rootInstance = React.render(RootComponent(), document.body); 


// Then just copy and paste this part at the bottom of 

// the file 

// 然后 在 文件 的 最 底部 复制 粘 帖 

if (module.hot) { 

require('react-hot-loader/Injection').RootInstanceProvider .injectProvider ({ 
getRootInstances: function () { 

// Help React Hot Loader figure out the root component instances on the page: 
// 帮助 React Hot Loader 识别 出 页 面 中 的 根 组 件 
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return [rootInstance]; 
} 
}); 
} 


It is that simple. Render a component to the DOM and make a code change on the class of that component. It will render 
itself again, keeping the existing state. Cool? 


就 是 这 人 么 简单 ， 在 DOM 中 泻 染 一 个 组 件 ， 然 后 修改 一 些 组 件 中 的 代码 ， 它 会 自动 泻 染 ， 却 保存 了 已 经 存在 了 的 状态 ， 忆 不 
属 ? 


Read more about the react-hot-loader. 


可 以 到 react-hot-loader 了 解 更 多 。 
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When users hit the URL of your application they will need to download different assets. CSS, JavaScript, HTML, images 
and fonts. The great thing about Webpack is that you can stop thinking how you should download all these assets. You can 
do it through JavaScript. 


当 用 户 输入 你 应 用 的 地 址 的 时 候 ， 他 们 需要 去 下 载 不 同 的 资源 ， 比 如 CSS, JavaScript. HTML, BAAS. Bit 
Webpack 做 了 一 件 事情 ， 让 你 不 用 去 考虑 如 何不 用 下 载 全 部 资源 。 


OccurenceOrderPlugin 


如 何 让 生产 输出 附 上 哈 硕 值 ? 


e Use [hash] . Example: 'assets/bundle.[hash].js' 
e 使 用 [hash] 。 比 如 : ‘assets/bundle.[hash].js' 


The benefit of this is that this will force the client to reload the file. There is more information about [hash] at the long term 
caching section of the official documentation. 


这 个 的 好 义 是 能 够 让 客户 端 强制 重新 加 载 这 个 文件 ， 可 以 在 the long term caching 了 解 更 多 关于 [hash], 


Is it possible to change the hash only if bundle changed? 有 可 能 只 有 合并 文件 变化 了 才 会 修改 哈 希 值 么 ? 
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我 可 以 使 用 哪 种 匹配 器 ? 


e { test: /\.js$/, loader: 'babel-loader' } - Matches just .js 
e { test: /\.(js|jsx)$/, loader: 'babel-loader' } - Matches both js and jsx 
e Generally put it's just a JavaScript regex so standard tricks apply 


@ { test: /\.js$/, loader: 'babel-loader' } - 只 匹配 js 
e { test: /\.(js|jsx)$/, loader: ‘babel-loader' } -匹配 js 和 jsx 
一 般 来 说 它 就 是 一 段 JavaScript 的 正则 ， 所 以 按照 标准 来 即 可 


匹配 器 
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Explain how webpack thinks chunks and not files 
What are files to load? And what does webpack create for you? And how? 


解释 Webpack 如 何 理解 chunks 而 不 是 文件 。 


加 载 什么 文件 ? Webpack 会 创建 怎么 样 的 ?如 何 ? 


we 





里 解 Chunks 
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Webpack can be handy for packaging your library for general consumption. You can use it to output UMD, a format that's 
compatible with various module loaders (CommonJS, AMD) and globals. 


Webpack 可 以 非常 方便 地 打包 和 生成 你 的 库 ， 你 可 以 用 它 输出 UMD， 一 种 可 以 兼容 很 多 模块 加 载 器 (CommonJS、AMD) 
和 全 局 变量 的 格式 。 


如 何 把 库 输出 成 UMD? 


Especially if you are creating a library, it can be useful to output an UMD version of your library. This can be achieved using 
the following snippet: 


尤其 是 如 果 你 创建 了 一 个 库 ， 那 么 输出 一 个 UMD 版 本 是 非常 有 用 的 ， 就 像 下 面 的 片段 一 样 实现 : 


output: { 
path: /dst 
filename: 'mylibrary.js', 
libraryTarget: 'umd', 
library: 'MyLibrary', 

}, 


In order to avoid bundling big dependencies like React, you'll want to use a configuration like this in addition: 


为 了 避免 去 合并 类 似 React 的 大 型 依赖 ， 你 可 以 使 用 下 面 这 样 的 设置 : 


externals: { 
react: 'react', 
"react/addons': 'react' 


} 


如 何 输出 压缩 版 ? 
Here's the basic idea: 


这 里 是 一 个 简单 的 方案 : 


output: { 
Dat ds bn 
filename: 'awesomemular.min.js', 
libraryTarget: 'umd', 
library: 'Awesomemular', 
}, 
plugins: [ 
new webpack.optimize.UglifyJsPlugin({ 
compress: { 
warnings: false 


}), 





